import React, {Component}  from 'react';
import {Card, Button, Radio, Icon} from 'antd';

import './style.less';

const {Group} = Button;

class ButtonPage extends Component {
  constructor(props){
    super(props);
    this.state = {
      loading: true,
      size: 'default'
    }
  }
  render(){
    const {loading, size} = this.state;
    return (
      <div className="pinlor-buttons">
        <Card title="基础按钮" className="pinlor-cards">
          <Button type="primary">Pinor</Button>
          <Button type="dashed">Pinor</Button>
          <Button>Pinor</Button>
          <Button type="danger">Pinor</Button>
          <Button disabled>Pinor</Button>
        </Card>
        <Card title="图形按钮" className="pinlor-cards">
          <Button icon="plus">创建</Button>
          <Button icon="edit">编辑</Button>
          <Button icon="delete">删除</Button>
          <Button shape="circle" icon="search"></Button>
          <Button type="primary" icon="search">搜索</Button>
          <Button type="primary" icon="download">下载</Button>
        </Card>
        <Card title="Loading按钮" className="pinlor-cards">
          <Button type="primary" loading={loading}>确定</Button>
          <Button type="primary" loading={loading} shape="circle"></Button>
          <Button loading={loading}>点击加载</Button>
          <Button loading={loading} shape="circle"></Button>
          <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
        </Card>
        <Card title="按钮组" className="pinlor-btn-group pinlor-cards">
          <Group>
          <Button type="primary"><Icon type="left"/>返回</Button>
          <Button type="primary">前进<Icon type="right"/></Button>
          </Group>
        </Card>
        <Card title="按钮尺寸" className="pinlor-cards">
          <Radio.Group value={size} onChange={this.handleChange}>
            <Radio value="small">小</Radio>
            <Radio value="default">中</Radio>
            <Radio value="large">大</Radio>
          </Radio.Group>
            <Button type="primary" size={size}>Pinlor</Button>
            <Button size={size}>Pinlor</Button>
            <Button type="dashed" size={size}>Pinlor</Button>
            <Button type="danger" size={size}>Pinlor</Button>
        </Card>
      </div>
    );
  }
  handleCloseLoading = ()=>{
    this.setState({
      loading: false
    })
  }
  handleChange = e=>{
    this.setState({
      size: e.target.value
    })
  }
}

export default ButtonPage;
